.app-control-dataview {
  padding: 0 10px;

  .app-dataview-item {    
    transition: 0.3s;
    margin: 16px;
    text-align: center;
    border: 1px solid mix(#fff, @text-color, 85%);
    &&--selected {
      border: 1px solid mix(@primary-color, #fff, 40%);
    }
    .action-button {
      &:hover {
        color: mix(mix(@primary-color, #fff, 20%), #fff, 50%);
      }
      &:disabled,
      &:disabled:hover {
        color: @border-color-base;
      }
    }
    .top__title {
      text-align: center;
    }

    .top__description {
      max-width: 150px;
      padding-left: 5px;
      text-align: justify;
      text-justify: newspaper;
      word-break: break-all;
    }

    .bottom__action {
      height: 26px;
      margin: 6px 0 4px 4px;
      cursor: pointer;
      padding: 0 15px;

      &:disabled,
      &:disabled:hover {
        cursor: no-drop;
      }

      .bottom__action__icon {
        padding-right: 6px;
      }
    }
  }

  .app-control-panel {
    overflow: visible;

    .control-content {
      overflow: initial;
    }
  }

  .app-dataview-item:hover {
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);    
    border: 1px solid mix(mix(@primary-color, #fff, 40%), #fff, 80%);
  }

  .load-more {
    text-align: center;
    width: 100%;
  }

  .app-control-dataview-content {
    display: flex;
    flex-wrap: wrap;
    .app-control-dataview-content__group{
      width: 100%;
      .app-dataview-group-item{          
          display: flex;
          justify-content: space-between;
          font-weight: bold;
          margin: 0;
          padding: 16px;
          .app-dataview-group-item-icon{
            cursor: pointer;
          }
        }
        .app-dataview-group__children{
          display: flex;
        }
    }
  }

  .app-control-dataview__pagination {
    .app-control-dataview-content {
      height: calc(100% - 30px) !important;
    }
  }
  
  .app-control-dataview-content__group{
    border-bottom: 1px solid mix(#fff, @text-color, 85%);
    .app-dataview-group-item--expand{
      background-color: #EDF4FE;
      color: @primary-color;
    }
  }
  
  .app-dataview-item--selected {
    border: 1px solid mix(@primary-color, #fff, 40%);
  }
  .data-view-item__title {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
